@charset "UTF-8";
@color-base: #1f1f1f;
@color-white: #fff;

@color-red: #ff2851;
@color-black: #333333;
@color-gray: #ccc;
@color-light-gray: #e7e7e7;

@color-blue: #1c8bea;
@color-deep-gray: #696363;
@color-bg: #f8f8f8;
@color-light-black: #808080;
@color-lighten-gray: #f5f5f5;
@color-orange: #ee4127;
@color-main: #a78862;
@color-gold: #c0aa75;

@images-base: '../images/';

@padding-width: 9px;

.h2(@color:@color-black,@height:.9rem,@font-size:.32rem) {
    height: @height;
    line-height: @height;
    position: relative;
    font-size: @font-size;
    color: @color;
    overflow: hidden;
}

.border-radius(@radius:.06rem) {
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.bg-img(@img,@background-size:100% 100%) {
    background: url("@{images-base}@{img}") no-repeat center;
    background-size: @background-size;
    -webkit-background-size: @background-size;
}

.border-a() {
    border: 1px solid @color-gray;
}

.main-width() {
    width: 100%;
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
}

.ab-position_normal(@w:0,@h:0) {
    position: absolute;
    width: @w;
    height: @h;
}

.ab-position(@w:0,@h:0) {
    content: '';
    .ab-position_normal(@w, @h);
}

.ab-position-bg(@color:@color-gray,@w:100%,@h:100%) {
    .ab-position(@w, @h);
    background: @color;
    z-index: 1;
}

.ab-position-border(@color:@color-gray,@w:100%,@h:100%) {
    .ab-position(@w, @h);
    left: 0;
    top: 0;
    border: 1px solid @color;
}

.ab-position-border-single(@des,@color:@color-gray,@w:100%,@h:100%) {
    .ab-position-border(@color:@color-gray,@w:100%,@h:100%);
    border: 0;
    border-@{des}: 1px solid @color;
}

.ab-position-img(@image,@background-size:100% 100%,@w:0,@h:0,@des1:top,@des2:left) {
    .ab-position(@w, @h);
    .bg-img(@image);
        @{des1}: 50%;
        @{des2}: 50%;
    margin-@{des1}: -@h/2;
    margin-@{des2}: -@w/2;
}

.ab-bg-img(@image,@background-size:100% 100%,@w:0,@h:0,@base-url:@images-base) {
    .ab-position(@w, @h);
    background: url("@{base-url}@{image}") center no-repeat;
    background-size: @background-size;
    -webkit-background-size: @background-size;
}

.flex () {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex_item() {
    display: block;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.auto_height(@padding-top:100%) {
    content: '';
    display: block;
    width: 100%;
    padding-top: @padding-top;
}

.auto_pos() {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.clear-fix() {
    content: " ";
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.new_price(@font-size:.3rem,@color:@color-red) {
    font-size: @font-size;
    color: @color;
}

.old_price (@font-size:.1rem,@color:#c3c3c3,@line-height:.16rem) {
    font-size: @font-size;
    color: @color;
    line-height: @line-height;
    text-decoration: line-through;
}

.auto_round(@w:.14rem,@color:@color-red) {
    width: @w;
    height: @w;
    line-height: @w;
    border-radius: 50%;
    position: relative;
    text-align: center;
    font-size: .08rem;
    background: @color;
    color: @color-white;
}

.transition(@transition-property:all,@transition-duration:.5s,@transition-timing-function:ease) {
    transition: @transition-property @transition-duration @transition-timing-function;
    -moz-transition: @transition-property @transition-duration @transition-timing-function;
    -webkit-transition: @transition-property @transition-duration @transition-timing-function;
    -o-transition: @transition-property @transition-duration @transition-timing-function;
    -ms-transition: @transition-property @transition-duration @transition-timing-function;
}

.transform(@fun) {
    transform: @fun;
    -webkit-transform: @fun;
    -o-transform: @fun;
    -moz-transform: @fun;
    -ms-transform: @fun;
}

.content_box() {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.border_box() {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.no_wrap() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto_wrap() {
    word-wrap: break-word;
    word-break: break-all;
}

.no_select() {
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no_content(@image,@background-size:100% 100%,@w:0,@h:0,@base-url:@images-base) {
    .transition(opacity, .1s);
    opacity: 0;
    background: @color-white;
    position: relative;
    &.active {
        opacity: 1;
    }
    h3 {
        position: absolute;
        height: .2rem;
        line-height: .2rem;
        font-size: .13rem;
        width: 100%;
        padding: 0 .1rem;
        text-align: center;
        color: @color-light-black;
        top: 50%;
        margin-top: -.1rem;
        &:after {
            .ab-bg-img(@image, @background-size, @w, @h, @base-url);
            left: 50%;
            margin-left: -@w/2;
        }
    }
}

.animation(@animation-name,@animation-duration:.5s,@animation-timing-function:ease,@animation-delay:0s,@animation-iteration-count:1,@animation-direction:normal) {
    animation: @animation-name @animation-duration @animation-timing-function @animation-delay @animation-iteration-count @animation-direction;
    -webkit-animation: @animation-name @animation-duration @animation-timing-function @animation-delay @animation-iteration-count @animation-direction;
}

.icon1(@bp:0 0) {
    .ab-bg-img('icons.png', 300px 300px, 50px, 50px);
    background-position: @bp;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

.icon2(@w,@h,@bp:0 0) {
    .ab-bg-img('icons.png', 300px 300px, @w, @h);
    background-position: @bp;
}